<script setup lang="ts">
import * as Icon from "@icon-park/vue-next";
import {MyCat} from "@/interfaces/apiResponse.ts";
const {cat} = defineProps<{
    cat:MyCat
}>()
</script>

<template>
  <section class="item" >
    <h4> <component :is="Icon[cat.icon!]" />&nbsp;{{cat.title}}</h4>
    <div class="buttons">
      <el-button type="primary" size="small" @click="$router.push({name:'cat.edit',params:{c_id:cat.id}})">
        <icon-editor />&nbsp;编辑
      </el-button>
      <el-button type="danger" size="small" @click="$emit('del',cat.id)">
        <icon-delete />&nbsp;删除
      </el-button>
    </div>
  </section>
</template>

<style lang="scss" scoped>
section.item{
  @apply  border border-cyan-600 rounded shadow flex flex-col justify-center items-center p-3 gap-3 cursor-pointer
  hover:bg-green-100 duration-300;
  h4{
    @apply flex items-center justify-center;
  }
}
</style>